<script setup lang="ts">
import moment from 'moment';
// import { DArrowLeft } from "@element-plus/icons";
import { ref, } from "vue";
interface ListInterface {
    name: string | number,
    id: string | number
}
let num = ref(10)
let times = ref(1000)

const arrs = ref<ListInterface[]>([])
function sleep(time: number) {
    return new Promise(function (resolve) {
        setTimeout(resolve, time);
    });
}

const gonum = async (num: number, time: number): Promise<any> => {
    await sleep(52)
    if (num) {
        console.log('开始')
        for (let i = 0; i < num; i++) {
            try {
                await sleep(time)
                let arrsitem: ListInterface = {
                    name: i,
                    id: moment().format("x")
                }
                arrs.value.push(arrsitem)
                console.log(i, moment().format("x"))
            } catch (e) {
                console.log(e)

            }
        }
        console.log('结束')
    }
    await sleep(time)
    console.log('255582')
    return null
}

interface ListClick {
    name: string,
    id: string | number,
    checked: boolean
}

const clickList = ref<ListClick[]>([
    { name: "1", id: 1, checked: false },
    { name: "2", id: 2, checked: false },
    { name: "3", id: 3, checked: false },
    { name: "4", id: 4, checked: false },
    { name: "5", id: 5, checked: false },
    { name: "6", id: 6, checked: false },
])

const checked = ref<boolean>(false)

// 修改 allclick 函数参数类型并添加类型检查
const allclick = function (e: string | number | boolean) {
    const isChecked = typeof e === 'boolean' ? e : false;
    clickList.value.map(ele => ele.checked = isChecked)
}

// 修改 goclick 函数参数类型并添加类型检查
const goclick = function (e: string | number | boolean) {
    // 由于 goclick 是单个复选框的 change 事件处理函数，参数 e 表示当前复选框的选中状态
    // 我们可以直接使用 e 的布尔值（如果它是布尔类型）
    const isChecked = typeof e === 'boolean' ? e : false;
    // 更新 checked.value 以反映所有复选框的状态
    checked.value = clickList.value.every(ele => ele.checked)
}
</script>
<template>
    <div class="common-layout">
        <div class="w-full h-[calc(100dvh-80px)] bg-slate-300 ">
            <el-checkbox class="ml-10" @change="allclick" v-model="checked" size="small" />
            <div class="ml-10" v-for="item in clickList" :key="item.id">
                <el-checkbox @change="goclick" v-model="item.checked" :label="item.name" size="small" />
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.common-layout {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #fff;
}
</style>
